<template>
    <div class="homeAdvertiseBox">
        <div class="adminSearchBox">
            <div class="adminSearchTop">
                <div class="adminSearchLeft">
                    <Search style="width: 1em; height: 1em; margin-right: 8px" />
                    <div>筛选搜索</div>
                </div>
                <div class="adminSearchRight">
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="queryList">查询搜索</el-button>
                </div>
            </div>
            <div class="parentSearchBox">
                <div class="adminSearch">
                    <span> 广告名称：</span>
                    <el-input size="default" v-model="adminSearchVal.name" placeholder="请输广告名称" />
                </div>
                <div class="adminSearch">
                    <span> 广告位置：</span>
                    <!-- <el-input size="default" v-model="adminSearchVal.keyword" placeholder="全部" /> -->
                    <el-select v-model="adminSearchVal.type" class="m-2" placeholder="请选择" size="default"
                        @change="selectChange">
                        <el-option v-for="item in options" :key="item.type" :label="item.label" :value="item.type" />
                    </el-select>
                </div>
                <div class="adminSearch">
                    <div class="block">
                        <span class="demonstration">到期时间：</span>
                        <el-date-picker v-model="adminSearchVal.endTime" type="date" placeholder="请选择时间" :size="size"
                            format='YYYY-MM-DD' @change="dateChange" />
                    </div>
                </div>
            </div>
        </div>
        <div class="dataListBox">
            <div class="TicketsLeft">
                <Tickets style="width: 1em; height: 1em; margin-right: 8px" />
                <div>数据列表</div>
            </div>
            <el-button type="primary" @click="addFn" v-permission="'addUser'">添加</el-button>

        </div>

        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" style="text-align: center;" />
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="广告名称" />

            <el-table-column label="广告位置">
                <template #default="{ row }">
                    {{ row.type == 0 ? 'PC首页轮播' : 'APP首页轮播' }}
                </template>
            </el-table-column>
            <el-table-column label="广告图片">
                <template #default="{ row }">
                    <div class="img-box">
                        <img class="advertiseImg" :src="row.pic" alt="">
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="时间">
                <template #default="scoped">
                    <div>
                        开始时间： {{ dayjs(scoped.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </div>
                    <div>
                        到期时间： {{ dayjs(scoped.row.endTime).format('YYYY-MM-DD HH:mm:ss') }}

                    </div>

                </template>
            </el-table-column>
            <el-table-column label="上线/下线">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @click="hdSwitchStatus(row)" />
                </template>
            </el-table-column>
            <el-table-column prop="clickCount" label="点击次数" width="100px" />
            <el-table-column prop="orderCount" label="生成订单" width="100px" />

            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="editFn(row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="deleteFn(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- ------------批量------------- -->
        <div class="advertiseFoot">
            <div>
                <el-select v-model="allDelVal" class="allDelVal" placeholder="批量操作" size='default'
                    @change="allDelValChange">
                    <el-option v-for="item in allOptions" :key="item.type" :label="item.label" :value="item.type" />
                </el-select>
                <el-button type="primary" @click="chooseConfirm">确认</el-button>
            </div>
            <!-- 分页 -->
            <el-pagination v-model:current-page="paginationParams.pageNum" v-model:page-size="paginationParams.pageSize"
                :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        </div>
    </div>
</template>

<script setup lang="ts">
import * as http from '@/request/http';
import { reactive } from 'vue';
import { ElMessage, ElMessageBox, dayjs } from 'element-plus';
import { ref } from 'vue'
import useTable from '@/hooks/components/useTable'
// import useSwitchStatus from "@/hooks/components/useSwitchStatus"
import { Search, Tickets } from '@element-plus/icons-vue'
import { useRouter } from "vue-router"
const router = useRouter()
const adminSearchVal = reactive({
    name: '',
    endTime: '',
    type: '',
})
const options = [
    {
        type: '0',
        label: 'PC首页轮播',
    },
    {
        type: '1',
        label: 'APP首页轮播',
    },
]
const dateChange = () => {
    console.log(adminSearchVal.endTime);

    adminSearchVal.endTime = dayjs(adminSearchVal.endTime).format('YYYY-MM-DD')
}
const selectChange = () => {
    console.log(adminSearchVal.type);
}
// 重置
const reset = () => {
    console.log(adminSearchVal.type);
    adminSearchVal.type = ''
    adminSearchVal.endTime = ''
    adminSearchVal.name = ''
}
const { tableData, paginationParams, handleSizeChange, handleCurrentChange, queryList } = useTable(http.homeAdvertise.getAdvertiseList, adminSearchVal)

const addFn = () => {
    router.push('addAdvertise')
}
const editFn = (row: IAdvertiseList) => {
    console.log(row);
    router.push(`updateAdvertise?id=${row.id}`)
}
const deleteFn = (id: number[]) => {
    console.log(id);
    ElMessageBox.confirm(
        '是否确认删除',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.homeAdvertise.homeAdvertiseDelete(id).then(res => {
                if (res.code === 200) {
                    console.log(res);
                    queryList()
                } else {
                    console.log(3000);
                }
            })
        })
        .catch(() => {

        })

}
//更改状态
const hdSwitchStatus = (row: IAdvertiseList) => {
    // useSwitchStatus(http.homeAdvertise.advertiseUpdateStatus, { id: row.id, status: row.status }, http.homeAdvertise.getAdvertiseList, {
    //     pageNum: 1,
    //     pageSize: 5,
    // })
    ElMessageBox.confirm(
        '是否要修改上线/下线状态?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            http.homeAdvertise.advertiseUpdateStatus({ id: row.id, status: row.status }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    ElMessage.success('更新成功');
                    queryList()
                } else {
                    row.status = row.status == 1 ? 0 : 1
                    ElMessage.error('更新失败')
                }
            })
        }).catch(() => {
            row.status = row.status == 1 ? 0 : 1
            console.log(row.status);
            ElMessage.success('已取消操作')
            queryList()
        })
}

// 表格数据
interface User {
    id: number
}
const size = ref<'default' | 'large' | 'small'>('default')

const multipleSelection = ref<User[]>([])
let arr: number[] = []
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
    multipleSelection.value.forEach(item => {
        arr.push(item.id)
    })
    console.log(arr);
}
let newArr: number[] = []
const allDelValChange = () => {
    newArr = arr
}
// 批量删除
const chooseConfirm = () => {
    if (newArr.length) {
        deleteFn(newArr)

    } else {
        ElMessage.warning('请至少选择一条选项')
    }
}
const allDelVal = ref('')
const allOptions = [

    {
        type: 0,
        label: 'APP首页轮播',
    },
]
</script>

<style scoped>
.homeAdvertiseBox {
    padding: 25px 20px 0;
}

.parentSearchBox {
    display: flex;
    padding: 5px;
}

.adminSearchBox {
    margin-top: 40px;
    padding: 20px;
    height: 90px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .adminSearchTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .adminSearchLeft {

            display: flex;
            align-items: center;
        }
    }
}

.adminSearch {
    padding-left: 50px;
    padding-top: 20px;
    margin-right: 40px;

    .el-input {
        width: 190px;
    }
}

.dataListBox {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin: 20px 0;
    padding: 14px;

    .TicketsLeft {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}

.img-box {
    margin: auto;
    min-width: 80px;
    text-align: center;
}

.advertiseImg {
    width: 80px;
    height: 80px;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.advertiseFoot {

    margin-top: 20px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.allDelVal {
    margin-right: 20px;
}

:deep(.cell) {
    text-align: center;
}
</style>